
<template>
  <div style="background-color: #ffffff;height: 85vh;margin-top: -20px;border-radius: 10px">


    <el-row style="margin-top: 5px">
      <el-col :span="6" v-for="(item,index) in materialList.slice(0,4)" :key="item.id">
        <el-card :body-style="{ padding: '0px' }" style="width: 20vw;height: 37vh">
          <div class="container">
<!--            <img :src="item.url" class="img">-->
            <el-image
                style="width: 20vw; height: 30vh"
                :src="item.url"
                fit="contain"></el-image>
          </div>
          <div style="padding: 14px;">
            <div class="bottom clearfix">
              <span>{{'上传日期: '+formattedDate(item.createdTime)}}</span>
              <el-button type="text" class="button" style="color: red;padding-left: 10px" @click="deleteOne(item.id)">删除</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" v-for="(item,index) in materialList.slice(4,8)" :key="index" style="margin-top: 10px">
        <el-card :body-style="{ padding: '0px' }" style="width: 20vw;height: 37vh">
          <div class="container">
<!--            <img :src="item.url" class="img">-->
            <el-image
                style="width: 20vw; height: 30vh"
                :src="item.url"
                fit="contain"></el-image>
          </div>

          <div style="padding: 14px;">
            <div class="bottom clearfix">
              <span>{{'上传日期: '+formattedDate(item.createdTime)}}</span>
              <el-button type="text" class="button" style="color: red;padding-left: 10px" @click="deleteOne(item.id)">删除</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <el-row style="display: flex;">
      <div style="display: flex; justify-content: space-between; width: 100%;margin: 10px">
        <el-button style="height: 35px">全部</el-button>
        <div>
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="8"
              layout="total, prev, pager, next"
              :total="totalCount">
          </el-pagination>
        </div>
        <el-upload
            class="upload-demo"
            action="http://115.159.84.44:24576/wemedia/backend/v1/wemedia/uploadPicture"
            multiple
            name="file"
            :limit="1"
            :on-exceed="handleExceed"
            :headers="headers"
            :file-list="fileList"
            :on-success="handleSuccess"
            :on-error="handleError"
            :before-upload="customUpload"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg文件</div>
        </el-upload>
      </div>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'MyMaterial',
  data(){
    return {
      headers:{
        token:localStorage.getItem("token")
      },
      fileList:[],
      materialList:[],
      currentPage:1,
      totalCount:8
    }
  },
  mounted() {
    this.getMyMaterial(1)
  },
  computed: {

  },
  methods:{
    deleteOne(id){
      this.axios.get('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/deleteOne/'+id,{
        headers:{
          'token': localStorage.getItem('token')
        },
      }).then((res)=>{
        if(res.data.code === 3002){
          this.$message({
            message: res.data.errorMessage,
            type: 'error'
          });
          return
        }else{
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }

        this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/list',{
          "page":this.currentPage,
          "size":8
        },{
          headers:{
            'token': localStorage.getItem('token')
          },
        }).then((res)=>{
          console.log(res.data.data);
          this.materialList = res.data.data
          this.totalCount = res.data.total
        });
      });

    },
    formattedDate(date) {
      return moment(date).format('YYYY-MM-DD'); // 使用 Moment.js 格式化日期
    },
    handleCurrentChange(val){
      this.currentPage = val
      console.log("curr ",this.currentPage)
      this.getMyMaterial(this.currentPage)
    },
    getMyMaterial(currentPage){
      this.axios.post('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/list',{
          "page":currentPage,
          "size":8
        },{
        headers:{
          'token': localStorage.getItem('token')
        },
      }).then((res)=>{
        console.log(res.data.data);
        this.materialList = res.data.data
        this.totalCount = res.data.total
      });
    },
    customUpload(file) {
      const fileType = file.type.toLowerCase();
      const isJpg = fileType === 'image/jpeg' || fileType === 'image/jpg';
      if (!isJpg) {
        this.$message.error('只能上传 JPG 文件');
      }
      return isJpg;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
      this.$message({
        message: '恭喜你，上传成功',
        type: 'success'
      });
      console.log(response); // 上传成功后的响应数据
      console.log(file); // 当前上传的文件对象
      console.log(fileList); // 已上传的文件列表
      this.fileList = []
    },
    handleError(error, file, fileList) {
      // 处理上传失败的逻辑
      this.$message.error('上传失败');
      console.log(error); // 上传失败的错误信息
      console.log(file); // 当前上传的文件对象
      console.log(fileList); // 已上传的文件列表
      this.fileList = []
    }
  }
}
</script>


<style scoped>
.container {
  width: 20vw;
  height: 30vh;
  overflow: hidden; /* 防止图片溢出容器 */
}

.container img {
  max-width: 100%;
  max-height: 100%;
}
/*.time {*/
/*  font-size: 13px;*/
/*  color: #999;*/
/*}*/

/*.bottom {*/
/*  margin-top: 13px;*/
/*  line-height: 12px;*/
/*}*/

/*.button {*/
/*  padding: 0;*/
/*  float: right;*/
/*}*/

/*.image {*/
/*  width: 100%;*/
/*  display: block;*/
/*}*/

/*.clearfix:before,*/
/*.clearfix:after {*/
/*  display: table;*/
/*  content: "";*/
/*}*/

/*.clearfix:after {*/
/*  clear: both*/
/*}*/
</style>